import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app) {
    //自定义指令-图片懒加载
app.directive('img-lazy', (el,binding) => {
  const { stop } = useIntersectionObserver(
  //被监听的元素
  el,
  // 监听元素是否进入视口
  ([{ isIntersecting }]) => {
    if(isIntersecting){
      el.src = binding.value
      // 图片加载完成后，停止监听
      stop()
    }
  },
)
})
}
}
